<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>中国地图标注示例</title>
</head>
<body>
    <div id="main" style="width: 1000px; height: 800px;"></div>

    <!-- 使用统一版本号 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <!-- <script src="/src/api/echarts.min.js"></script>
    <script src="/src/api/china.js"></script> -->

    <script>
        // 注册地图
        echarts.registerMap('china', {
            geoJSON: echarts.getMap('china').geoJSON,
            specialAreas: {}
        });

        // 初始化图表
        var myChart = echarts.init(document.getElementById('main'));

        // 地理坐标数据
        var geoCoordMap = {
            阿克苏地区: [80.260604, 41.168779],
            和田地区: [79.922211, 37.114157],
            上海: [121.480237, 31.236305],
            东莞: [113.758231, 23.026997],
            东营: [118.588614, 37.454925],
            中山: [113.399023, 22.522262],
            临汾: [111.526153, 36.094052],
            临沂: [118.36299, 35.110531],
            丹东: [124.362564, 40.00569],
            丽水: [119.929503, 28.472979],
            乌鲁木齐: [87.623314, 43.832806],
            佛山: [113.128432, 23.027707],
            保定: [115.471052, 38.880055],
            兰州: [103.840692, 36.067312],
            包头: [109.846755, 40.663636],
            北京: [116.413554, 39.911013],
            北海: [109.126614, 21.486955],
            南京: [118.802891, 32.064735],
            南宁: [108.373351, 22.823037],
            南昌: [115.864528, 28.687675],
            南通: [120.900301, 31.985237],
            厦门: [118.095915, 24.485821],
            台州: [121.426996, 28.662297],
            合肥: [117.235447, 31.82687],
            呼和浩特: [111.758518, 40.847461],
            咸阳: [108.715712, 34.335599],
            哈尔滨: [126.542417, 45.807782],
            唐山: [118.187036, 39.636673],
            嘉兴: [120.762045, 30.750912],
            大同: [113.306446, 40.082539],
            大连: [121.621391, 38.919345],
            天津: [117.205914, 39.090908],
            太原: [112.55706, 37.876885],
            威海: [122.128245, 37.519322],
            宁波: [121.556686, 29.880177],
            宝鸡: [107.243899, 34.367747],
            宿迁: [118.282062, 33.967686],
            常州: [119.980142, 31.816791],
            广州: [113.270793, 23.135308],
            廊坊: [116.69034, 39.54352],
            延安: [109.496361, 36.591003],
            张家口: [114.894165, 40.830172],
            徐州: [117.29235, 34.210143],
            德州: [116.365825, 37.441313],
            惠州: [114.423348, 23.116409],
            成都: [104.071216, 30.576279],
            扬州: [119.419107, 32.39986],
            承德: [117.969798, 40.957855],
            拉萨: [91.121025, 29.650088],
            无锡: [120.318954, 31.496704],
            日照: [119.533606, 35.422798],
            昆明: [102.839667, 24.885953],
            杭州: [120.161693, 30.280059],
            枣庄: [117.328513, 34.816569],
            柳州: [109.42198, 24.331519],
            株洲: [113.140431, 27.833737],
            武汉: [114.311831, 30.598428],
            汕头: [116.688739, 23.359289],
            江门: [113.088165, 22.584459],
            沈阳: [123.438973, 41.811339],
            沧州: [116.845272, 38.31022],
        };

        // 转换坐标数据为散点图格式
        var convertData = function () {
            var res = [];
            for (var name in geoCoordMap) {
                res.push({
                    name: name,
                    value: geoCoordMap[name].concat([Math.random() * 1000]) // 随机值用于大小映射
                });
            }
            return res;
        };

        // 配置项
        var option = {
            // 地图基础配置
            geo: {
                map: 'china',
                roam: true,
                label: {
                    show: true,
                    color: '#333'
                },
                itemStyle: {
                    areaColor: '#F0F8FF',
                    borderColor: '#708090'
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#FFA07A'
                    }
                }
            },

            // 数据系列配置
            // 数据系列配置
            series: [
                // 地图基础系列（保持不变）
                {
                    type: 'map',
                    map: 'china',
                    data: [/* 原有数据 */]
                },
                
                // 修改后的标注点系列
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(),
                    symbolSize: 6,  // 常态大小
                    showEffectOn: 'emphasis',  // 仅悬停时显示特效
                    rippleEffect: {
                        brushType: 'stroke',
                        scale: 8,          // 扩大涟漪范围
                        period: 3           // 加快动画速度
                    },
                    hoverAnimation: true,
                    // 常态样式
                    itemStyle: {
                        color: '#1890FF',
                        shadowBlur: 0
                    },
                    // 悬停样式
                    emphasis: {
                        itemStyle: {
                            color: '#FF4D4F',
                            shadowBlur: 10,
                            shadowColor: '#FF4D4F'
                        },
                        label: {
                            show: true,
                            fontSize: 14,
                            fontWeight: 'bold',
                            formatter: '{b}',
                            position: 'right',
                            color: '#FF4D4F',
                            backgroundColor: 'rgba(255,255,255,0.8)',
                            padding: [3, 5]
                        },
                        symbolSize: 12  // 悬停时放大标记
                    },
                    // 常态标签样式
                    label: {
                        show: false,    // 常态隐藏标签
                        formatter: '{b}',
                        position: 'right',
                        color: '#666',
                        fontSize: 12
                    },
                    zlevel: 1
                }
            ]
        };

        // 应用配置
        myChart.setOption(option);

        // 窗口自适应
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>